<template>
    <RegisterHeader>欢迎注册</RegisterHeader>
    <div class="register-container wrapper">
        <el-form :model="form" :rules="rules" ref="registerForms" class="form-wrap">
          <!-- 用户名 -->
          <el-form-item label="用户名" prop="username" :label-width="formLabelWidth">
            <el-input v-model="form.username" size="large" placeholder="请输入用户名" autocomplete="off" :prefix-icon="User" maxlength="30" clearable show-word-limit/>
          </el-form-item>

          <!-- 手机号 -->
          <el-form-item label="手机号" prop="mobile" :label-width="formLabelWidth">
            <el-input v-model="form.mobile" size="large" placeholder="请输入手机号" autocomplete="off" :prefix-icon="Iphone" maxlength="11" clearable show-word-limit/>
          </el-form-item>

          <!-- 邮箱 -->
          <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
            <el-input v-model="form.email" size="large" placeholder="请输入邮箱" autocomplete="off" :prefix-icon="Message" maxlength="30" clearable show-word-limit/>
          </el-form-item>

          <!-- 密码 -->
          <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
            <el-input v-model="form.password" size="large" placeholder="请输入密码" autocomplete="off" :prefix-icon="Lock" maxlength="30" clearable show-word-limit show-password/>
          </el-form-item>

          <!-- 确认密码 -->
          <el-form-item label="确认密码" prop="repassword" :label-width="formLabelWidth">
            <el-input v-model="form.repassword" size="large" placeholder="请输入确认密码" autocomplete="off" :prefix-icon="Lock" maxlength="30" clearable show-word-limit show-password/>
          </el-form-item>

          <div class="register-btn-wrap">
            <span @click="handlerRegister" class="register-btn">注 册</span>
          </div>
        </el-form>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useUserStore } from "@/stores/modules/user"
import { useRouter } from 'vue-router'

import RegisterHeader from './components/RegisterHeader.vue'

import { User, Lock, Iphone, Message } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'


// ------------------- 定义全局变量开始 -------------------
// 定义用户存储
const userStore = useUserStore()

// 定义路由器
const router = useRouter()

// 表单信息对象
const form = reactive({
    is_agree: false,
    username: '',
    mobile: '',
    email: '',
    repassword: '',
    password: '',
})

const formLabelWidth = ref('220px')

const registerForms = ref(null)
// ------------------- 定义全局变量结束 -------------------



// ------------ 自定义手机号校验规则函数开始 ----------------
const validatorMobile = (rule, value, callback) => {
  
  //rule:即为校验规则对象
  //value:即为表单元素文本内容
  //函数:如果符合条件callBack放行通过即为
  //如果不符合条件callBack方法,注入错误提示信息
  const pattern = /^1[3|5|7|8|9]\d{9}$/
  if (pattern.test(value)) {
    callback();
  } else {
    callback(new Error('请输入格式正确的手机号'));
  }
}
// ------------ 自定义手机号校验规则函数结束 ----------------



// ------------ 自定义邮箱校验规则函数开始 ----------------
const validatorEmail = (rule, value, callback) => {
  const pattern = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
  if (pattern.test(value)) {
    callback();
  } else {
    callback(new Error('请输入格式正确的邮箱'));
  }
}
// ------------ 自定义邮箱校验规则函数结束 ----------------



// ----------- 自定义确认密码校验规则函数开始 ----------------
const validatorRepassword = (rule, value, callback) => {
  if (form.password == value) {
    callback();
  } else {
    callback(new Error('两次密码不一致'));
  }
}
// ------------ 自定义确认密码校验规则函数结束 ----------------



// --------------------- 校验规则开始 ---------------------
const rules = {
  //规则对象属性:
  //required,代表这个字段务必要校验的
  //min:文本长度至少多少位
  //max:文本长度最多多少位
  //message:错误的提示信息
  //trigger:触发校验表单的时机 change->文本发生变化触发校验,blur:失去焦点的时候触发校验规则
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  mobile: [
    { required: true, message: '请输入格式正确的手机号', trigger: 'blur' },
    { trigger: 'blur', validator: validatorMobile }
  ],
  email: [
    { required: true, message: '请输入格式正确的邮箱', trigger: 'blur' },
    { trigger: 'blur', validator: validatorEmail }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { required: true, min: 6, max: 30, message: '密码长度至少6位', trigger: 'blur' }
  ],
  repassword: [
    { required: true, message: '请输入确认密码', trigger: 'blur' },
    { trigger: 'blur', validator: validatorRepassword }
  ],
}
// --------------------- 校验规则结束 ---------------------



// --------------------- 注册功能开始 ---------------------
const handlerRegister = async () => {
  //保证全部表单相校验通过再发请求
  await registerForms.value.validate();

  await userStore.register(form)

  ElNotification({ type: 'success', message: '注册成功' });
  router.push({path: '/login'})
}
// --------------------- 注册功能结束 ---------------------
</script>

<style scoped lang="scss">
.register-container {
  margin: 20px auto;
  padding: 10px;
  background-color: #fff;
  .form-wrap {
    width: 600px;
    margin: 0 auto;
    padding: 20px 0;
    .register-btn-wrap {
      display: flex;
      justify-content: center;
      height: 50px;
      line-height: 50px;
      margin-left: 200px;
      .register-btn {
        background-color: $main-color;
        color: #fff;
        width: 200px;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>